{% extends 'layout.html' %}
{% block title %}个人信息{% endblock %}
{% block css %}
    <style>
        .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: none;
            margin: 20px;
        }
        .card .h5 {
            width: 100%;
            text-align: center;
            background-color: #6c757d;
            color: white;
            padding: 10px 0;
            border-radius: 5px 5px 0 0;
        }
        .card table {
            width: 100%;
        }
        .card table tr {
            display: flex;
            justify-content: space-between;
        }
        .card table td {
            flex: 1;
        }
        .card .text-center {
            margin-top: 20px;
            width: 100%;
        }
    </style>
{% endblock %}
{% block content %}
    {% if user.is_superuser %}
        <div style="text-align: right">
            <a href="/admin/" target="_blank">
                <button class="btn btn-dark">后台</button>
            </a>
        </div>
    {% endif %}
    <div class="card">
        <div class="h5 text-bg-secondary">
            <h1 style="text-align: center">个人信息</h1>
        </div>
        <table class="table table-striped table-hover border">
            <tr>
                <td>用户名:</td>
                <td>{{ user.username }}</td>
            </tr>
            <tr>
                <td>名字</td>
                <td>{{ user.first_name }}</td>
            </tr>
            <tr>
                <td>姓氏</td>
                <td>{{ user.last_name }}</td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td>{{ user.email }}</td>
            </tr>
        </table>
        <div class="text-center">
            {% if user.is_superuser %}
                <h3 style="color: red;">管理员个人信息管理需前往系统后台</h3>
            {% else %}
                <a href="/user_edit/">
                    <button type="submit" class="btn btn-primary">修改信息</button>
                </a>
                <a href="/change_password/">
                    <button type="submit" class="btn btn-danger">修改密码</button>
                </a>
            {% endif %}
        </div>
    </div>
{% endblock %}